<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/jquery-3.3.1.min.js"></script>
    <script src="lib/html2canvas.min.js"></script>
    <!--<script src="lib/rgbcolor.min.js"></script>-->
    <!--<script src="lib/stackblur.min.js"></script>-->
    <!--<script src="lib/canvg.js"></script>-->
    <script src="http://api.map.baidu.com/api?v=3.0&ak=PgNHPqzIRsGR1yhs8nkoCtXOZLbwmawp"></script>
    <style type="text/css">
        #container {
            position: absolute;
            width: 800px;
            height: 500px;
            top: 50px;
            left: 100px;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }

        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        #get-img {
            position: absolute;
            left: 100px;
            top: 600px;
        }
    </style>
</head>

<body>
    <button id="get-img">获取图片</button>
    <div id="container">
        <div id="map"></div>
    </div>
</body>
<script>
    let map = new BMap.Map("map");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
    map.enableScrollWheelZoom();

    var marker = new BMap.Marker(new BMap.Point(116.404, 39.915), {
        icon: new BMap.Icon("img/airplane1.png", new BMap.Size(28, 28))
    }); // 创建点
    let polygon = new BMap.Polygon([
        new BMap.Point(116.387112, 39.920977),
        new BMap.Point(116.385243, 39.913063),
        new BMap.Point(116.394226, 39.917988),
        new BMap.Point(116.401772, 39.921364),
        new BMap.Point(116.41248, 39.927893)
    ], { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });  //创建多边形
    let circle = new BMap.Circle(new BMap.Point(116.404, 39.915), 500, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 }); //创建圆
    map.addOverlay(marker);
    map.addOverlay(polygon);
    map.addOverlay(circle);

    let label = new BMap.Label("欢迎使用百度地图，这是一个简单的文本标注哦~", {
        position: new BMap.Point(116.417854, 39.921988),    // 指定文本标注所在的地理位置
        offset: new BMap.Size(30, -30)    //设置文本偏移量
    });  // 创建文本标注对象
    label.setStyle({
        color: "red",
        fontSize: "12px",
        height: "20px",
        lineHeight: "20px",
        fontFamily: "微软雅黑"
    });
    map.addOverlay(label);

    /* 点击截图按钮事件 */
    $('#get-img').click(function () {
        PrtScn("#map").then((result) => {
            download(result);
        });
    });

    /* 截图核心方法封装 */
    function PrtScn(dom) {
        // svg转canvas
        let nodesToRecover = [];
        let nodesToRemove = [];
        let svgElem = $(dom).find('svg'); // divReport为需要截取成图片的dom的id
        let prepare = [];
        for (let i = 0; i < svgElem.length; i++) {
            prepare.push(0);
        }
        svgElem.each(function (index, node) {
            let parentNode = node.parentNode;
            let svg = node.outerHTML;
            let canvas = document.createElement('canvas');
            // canvg(canvas, svg);
            canvas.style.position = node.style.position;
            canvas.width = parseInt(node.style.width);
            canvas.height = parseInt(node.style.height);
            canvas.style.left = 0;
            canvas.style.top = 0; // 生成与svg对应尺寸的canvas
            let ctx = canvas.getContext('2d');
            let svg_xml = (new XMLSerializer()).serializeToString(node);
            let img = new Image();
            img.src = "data:image/svg+xml;base64," + window.btoa(svg_xml);
            img.onload = function () {
                ctx.drawImage(img, 0, 0);
                prepare[index] = 1;
                //download(canvas.toDataURL("image/png")); // 调试用
            }
            parentNode.appendChild(canvas); // 使用canvas代替svg进行截图
            nodesToRemove.push({ // 完成截图后删除canvas
                parent: parentNode,
                child: canvas
            });
            nodesToRecover.push({ // 完成截图后恢复svg
                parent: parentNode,
                child: node
            });
            parentNode.removeChild(node); // 暂时移除svg
        });
        return new Promise((resolve) => {
            let waitInterval = setInterval(() => {
                let isComplete = true; // 创建定时器，等待上面img.onload的异步操作
                for (let i = 0; i < prepare.length; i++) {
                    if (prepare[i] == 0) {
                        isComplete = false;
                        break;
                    }
                }
                if (isComplete) {
                    clearInterval(waitInterval);
                    // div转canvas截图
                    html2canvas(document.getElementById('container'), {
                        useCORS: true
                    }).then((cnv) => {
                        let imgUrl = cnv.toDataURL("image/png"); // 将canvas转换成img的src流，base64
                        for (let i = 0; i < nodesToRecover.length; i++) {
                            nodesToRecover[i].parent.appendChild(nodesToRecover[i].child);
                        }
                        for (let i = 0; i < nodesToRemove.length; i++) {
                            nodesToRemove[i].parent.removeChild(nodesToRemove[i].child);
                        }
                        resolve(imgUrl);
                    });
                }
            }, 5);
        });
    }

    /* 下载图片的方法 */
    function download(url) {
        let a = document.createElement('a');
        a.style.display = 'none';
        document.body.appendChild(a);
        let triggerDownload = $(a).attr("href", url).attr("download", "order-1111111111.png");
        triggerDownload[0].click();
        document.body.removeChild(a);
    }
</script>

</html>